/**
 *  form表单
 */
import React, { Component } from 'react';
import styles from './index.less';
import { Form, Radio, Input, Select, DatePicker } from 'antd';
import BasicFormS from './BasicFormS';
import BasicForm from './BasicForm';
import CustomBreadcrumb from './CustomBreadcrumb';
import Descriptions from './Descriptions';
import CustomTabs from './CustomTabs';
import Tabs from './Tabs';
const { RangePicker } = DatePicker;
export default class extends Component {
  state = {
    expand: false, //展开/收起表单状态
    formRef: React.createRef(),
    activeTabKey: '1',
  };

  /** Breadcrumb 面包屑----------------------------------------- */
  userMenu = [
    { title: '萧山电厂', link: '/profile' },
    { title: '其他电厂', link: '/settings' },
  ];

  breadcrumbItems = [
    { title: '智能经营', dropdownMenu: null },
    { title: '年度生产计划', link: '/products', dropdownMenu: null },
    { title: '经营目标拆解', dropdownMenu: this.userMenu },
  ];

  /** Form 表单 (固定版)----------------------------------------- */

  // 修改展开/收起表单状态
  changeExpand = () => {
    this.setState({
      expand: !this.state.expand,
    });
  };

  // 表单初始字段
  formList = () => {
    const formList = [
      {
        type: 'INPUT',
        placeholder: '请输入规则编号',
        label: '规则编号',
        width: 160,
        field: 'aaa',
        name: 'aaa',
      },
      {
        type: 'RANGEPICKER',
        witdh: 277,
        name: 'rangePickerData',
        label: '日期范围',
        field: 'rangePickerData',
      },

      {
        type: 'SELECT',
        placeholder: '请选择种类',
        width: 160,
        label: '选择种类',
        field: 'bbb',
        name: 'bbb',
        list: [
          {
            id: 1,
            name: '西瓜',
          },
          {
            id: 2,
            name: '芒果',
          },
          {
            id: 3,
            name: '西红柿',
          },
        ],
      },
    ];

    return formList;
  };

  // 展开表单字段
  extendFormList = () => {
    const extendFormList = [
      {
        type: 'RANGEPICKER',
        witdh: 277,
        name: 'rangePickerData1',
        label: '选择日期',
        field: 'rangePickerData1',
      },
      {
        type: 'RADIO',
        width: 200,
        label: '审批结果',
        field: 'radio',
        name: 'radio',
        radioValue: 1,
        list: [
          {
            id: 1,
            name: '同意',
          },
          {
            id: 2,
            name: '驳回',
          },
        ],
      },
      {
        type: 'INPUT',
        placeholder: '请输入电影名称',
        width: 160,
        label: '电影名称',
        name: 'ggg',
        field: 'ggg',
      },

      {
        type: 'SELECT',
        placeholder: '请选择电影',
        width: 160,
        label: '选择电影',
        name: 'fff',
        field: 'fff',
        list: [
          {
            id: 1,
            name: '泰坦尼克号',
          },
          {
            id: 2,
            name: '阿凡达',
          },
          {
            id: 3,
            name: '蜘蛛侠',
          },
        ],
      },
    ];
    return extendFormList;
  };

  // 查询表单回调
  formSubmit = info => {
    console.log(info, 'info');
  };

  /** Form 表单 (灵活版)----------------------------------------- */
  formItems = [
    <Form.Item name="age" label="规则编号">
      <Input
        style={{ width: 160 }}
        maxLength={16}
        //text:用户名
        placeholder={'请输入规则编号'}
      />
    </Form.Item>,

    <Form.Item name="rangePicker" label="日期范围">
      <RangePicker style={{ width: 277 }} format="YYYY-MM-DD" />
    </Form.Item>,
    <Form.Item name="555" label="选择种类">
      <Select
        //请选择角色
        style={{ width: 160 }}
        placeholder={'请选择种类'}
        allowClear
      >
        <Select.Option key={111} value={111}>
          西瓜
        </Select.Option>
        <Select.Option key={222} value={222}>
          芒果
        </Select.Option>
        <Select.Option key={333} value={333}>
          西红柿
        </Select.Option>
      </Select>
    </Form.Item>,

    <Form.Item name="rangePicker111" label="选择日期">
      <RangePicker style={{ width: 277 }} format="YYYY-MM-DD" />
    </Form.Item>,

    <Form.Item name="name" label="审批结果">
      <Radio.Group
      //  defaultValue={0}
      >
        <Radio value={0}>同意</Radio>
        <Radio value={1}>驳回</Radio>
      </Radio.Group>
    </Form.Item>,

    <Form.Item name="email" label="电影名称">
      <Input
        style={{ width: 160 }}
        maxLength={333}
        //text:用户名
        placeholder={'请输入电影名称'}
      />
    </Form.Item>,
    <Form.Item name="444" label="选择电影">
      <Select
        //请选择角色
        style={{ width: 160 }}
        placeholder={'请选择电影'}
        allowClear
      >
        <Select.Option key={111} value={111}>
          泰坦尼克号
        </Select.Option>
        <Select.Option key={222} value={222}>
          阿凡达
        </Select.Option>
        <Select.Option key={333} value={333}>
          蜘蛛侠
        </Select.Option>
      </Select>
    </Form.Item>,
    // 添加更多的表单项
  ];

  handleFormFinish = value => {
    console.log(value);
  };

  /** Tabs 标签页----------------------------------------- */
  tabPaneList = [
    {
      tab: '参数配置',
      key: 1,
    },
    {
      tab: '生产概览',
      key: 2,
    },

    {
      tab: '数据全揽表',
      key: 3,
    },
    {
      tab: '财务概览',
      key: 4,
    },
    {
      tab: '变更日志',
      key: 5,
    },
  ];

  handleTabChange = key => {
    console.log(key, 'key');
    this.setState({ activeTabKey: key });
  };

  render() {
    return (
      <div className={styles.pageCont}>
        <div className={styles.left}></div>
        <div className={styles.right}>
          <div className={styles.top}></div>
          <div className={styles.content}>
            <div className={styles.header}>
              <div className={styles.Custom}>
                <CustomBreadcrumb
                  className={styles.CustomBreadcrumb}
                  items={this.breadcrumbItems}
                />
              </div>

              <div className={styles.Tabs}>
                <CustomTabs
                  activeTabKey={this.state.activeTabKey}
                  onChange={this.handleTabChange}
                  TabPaneList={this.tabPaneList}
                  className={styles.Tabs}
                />
              </div>

              {/*  
                * form查询表单对应参数
                 * formList:最初展示的表单数组，最多配置三个
                 * extendFormList:点击展开显示的剩余表单的数组
                 * changeExpand:控制展开/收起按钮，如果表单数量小于等于三个，则不显示此按钮
                 * filterSubmit:点击查询按钮的回掉，可以获取表单的所有数据

               */}
              {/* <BasicFormS
                formList={this.formList()}
                extendFormList={this.extendFormList()}
                expand={this.state.expand}
                changeExpand={this.changeExpand}
                filterSubmit={this.formSubmit}
              /> */}

              <BasicForm
                ref={this.state.formRef}
                onFinish={this.handleFormFinish}
                initialValues={{}}
                formItems={this.formItems}
              ></BasicForm>
            </div>

            <div className={styles.body}>
              <Descriptions />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
